<template>
  <!-- 添加或修改散杂货申报管理对话框 -->
  <div>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    width="1200px"
    append-to-body
    :close-on-click-modal="false"
    @close="close"
    class="self-dialog"
  >
  <el-tabs v-if="dialogVisible" v-model="activeName">
      <el-tab-pane label="基本信息" name="first">
        <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="158px"
      label-position="right"
      class="flex-form basic-form"
      size="small"
    >

    <el-form-item label="车牌号" prop="transportName">
      <el-input
        v-model.trim="form.transportName"
         ref="vehicleInput"
        placeholder="请输入车牌号"
        @focus="openSelectVehicle"
      />
    </el-form-item>
    <el-form-item label="车辆重量" prop="vehicleWeight">
      <el-input-number v-model.trim="form.vehicleWeight" :min="0" label="请输入车辆重量"></el-input-number>
    </el-form-item>

      <el-form-item label="绑定介质类型" prop="bindKeyType">
        <el-select
          v-model.trim="form.bindKeyType"
          placeholder="请选择绑定介质类型"
          @change="bindKeyTypeChange"
        >
          <el-option
            v-for="dict in dict.type.sgs_bind_key_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="绑定介质关键信息" prop="bindKeyInfo">
        <el-input
          v-model.trim="form.bindKeyInfo"
          placeholder="请输入绑定介质关键信息"
        />
      </el-form-item>
      <el-form-item label="进出口标志" prop="iEFlag">
        <el-select v-model.trim="form.iEFlag" @change="iEFlagChange" placeholder="请选择进出口标志">
          <el-option
            v-for="dict in dict.type.sys_i_e_flag"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="业务类型" prop="rdCode">
        <el-select v-model.trim="form.rdCode" placeholder="请选择业务类型">
          <el-option
            v-for="dict in dict.type.sgs_bill_rd_code"
            :key="dict.value"
            :label="dict.value+'-'+dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>



      <el-form-item label="提货关区" prop="customsMaster">
        <el-select
          v-model.trim="form.customsMaster"
          filterable
          @change="customsCodeChange"
          placeholder="请选择提货关区"
        >
          <el-option
            v-for="(item, index) in customsList"
            :key="index"
            :label="item.value+'-'+item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="提货场所" prop="bayonetFieldCode">
        <el-select v-model.trim="form.bayonetFieldCode" placeholder="请选择提货场所" filterable clearable>
          <el-option
            v-for="dict in selectBaseFieldInfoList"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="运输方式" prop="declTrafMode">
        <el-select v-model.trim="form.declTrafMode" placeholder="请选择运输方式">
          <el-option
            v-for="dict in dict.type.sgs_decl_traf_mode"
            :key="dict.value"
            :label="dict.value+'-'+dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="过卡车辆类型" prop="bayonetRdCode">
        <el-select
          v-model.trim="form.bayonetRdCode"
          placeholder="请选择过卡车辆类型"
        >
          <el-option
            v-for="dict in dict.type.sgs_bayonet_rd_code"
            :key="dict.value"
            :label="dict.value+'-'+dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="挂车车牌" prop="trayName">
        <el-input v-model.trim="form.trayName"  label="请输入挂车车牌"></el-input>
      </el-form-item>
      <el-form-item label="挂车重量" prop="trailerWeight">
        <el-input-number v-model.trim="form.trailerWeight" @change="trayWtChange" :min="0" label="请输入挂车重量"></el-input-number>
      </el-form-item>


      <el-form-item label="备注" prop="remark">
        <el-input
          v-model.trim="form.remark"
          type="textarea"
          placeholder="请输入内容"
        />
      </el-form-item>
    </el-form>
      </el-tab-pane>
      <el-tab-pane label="散杂货申报列表" name="second">
        <sub-list ref="subList" @receiveSubList="receiveSubList" :bulkCargoListData="form.bulkCargoListList"></sub-list>
      </el-tab-pane>
  </el-tabs>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="close">取 消</el-button>
    </div>
  </el-dialog>


<!-- 选择运输工具弹出层 -->
  <select-vehicle
    ref="selectVehicle"
    @selectVeChange="selectVeChange"
  ></select-vehicle>

  </div>


</template>

<script>
import {
  getSgsBulkCargoHead,
  addSgsBulkCargoHead,
  updateSgsBulkCargoHead,
  declModifyBulkCargoRecord
} from "@/api/swdecl/sgsBulkCargoHead";
import SelectVehicle from "@/views/swdecl/components/selectBdVehicle.vue";
  import {
      findBaseFieldInfo,
      getBaseFieldInfo
    } from "@/api/system/baseFieldInfo";
import subList from './subList.vue';
export default {
  components: { subList,SelectVehicle },
  name: "SgsBulkCargoHead-addEdit",
  props: {
    dialogType: {
      type: String,
      default: "add",
    },
    rowData: {
      type: Object,
      default: () => {},
    },
    dict: {},
    customsList: {
      type: Array,
      default: () => [],
    },
    fieldOptions: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      // 弹出层
      dialogVisible: false,
      activeName: "first",
      // 标题
      title: "新增",
      // 表单参数
      form: {
        id: null,
        // sureId: null,
        // opTime: null,
        // opUserId: null,
        bindKeyType: null,
        bindKeyInfo: null,
        rdCode: null,
        declTrafMode: null,
        iEFlag: null,
        // customsCode: null,
        // fieldCode: null,
        // fieldName: null,
        transportId: null,
        transportName: null,
        customsMaster: null,
        bayonetFieldCode: null,
        bayonetFieldName: null,
        contractorCode: null,
        contractorCodeScc: null,
        bayonetRdCode: null,
        // goodsWt: null,
        vehicleWeight: null,
        trayName: null,
        trailerWeight: null,
        contaWeight: null,
        remark: null,
        bulkCargoList: []
        // declStatus: "0",
        // declTime: null,
        // rcptStatus: "0",
        // rcptRemark: null,
        // msgId: null,
        // entCode: null,
      },
      //选中的车辆
      selectVehicelItem:null,
      // 散杂货申报管理表格数据
      sgsBulkCargoHeadList: [],
      //下来场所列表
      selectBaseFieldInfoList: [],
      // 表单校验
      rules: {
        bindKeyType: [
          {
            required: true,
            message: "绑定介质类型不能为空",
            trigger: "change",
          },
        ],
        transportName: [
          {
            required: true,
            message: "车牌号不能为空",
            trigger: "change",
          },
        ],
        bindKeyInfo: [
          {
            required: true,
            message: "绑定介质关键信息不能为空",
            trigger: "blur",
          },
        ],
        declTrafMode: [
          { required: true, message: "运输方式不能为空", trigger: "blur" },
        ],
        rdCode: [
          { required: true, message: "业务类型不能为空", trigger: "blur" },
        ],
        iEFlag: [
          { required: true, message: "进出口标志不能为空", trigger: "change" },
        ],
        customsCode: [
          {
            required: true,
            message: "做单所属海关不能为空",
            trigger: "change",
          },
        ],
        fieldCode: [
          {
            required: true,
            message: "做单场所代码不能为空",
            trigger: "change",
          },
        ],
        fieldName: [
          { required: true, message: "做单场所名称不能为空", trigger: "blur" },
        ],
        bayonetRdCode: [
          { required: true, message: "过卡类型不能为空", trigger: "blur" },
        ],
        customsMaster: [
          { required: true, message: "过卡海关不能为空", trigger: "change" },
        ],
        bayonetFieldCode: [
          {
            required: true,
            message: "过卡场所代码不能为空",
            trigger: "change",
          },
        ],
        bayonetFieldName: [
          { required: true, message: "过卡场所名称不能为空", trigger: "blur" },
        ],
        vehicleWeight: [
          { required: true, message: "车辆重量不能为空", trigger: "blur" },
        ],
        trailerWeight: [
          { required: true, message: "挂车重量不能为空", trigger: "blur" },
        ],
        trayName: [
          { required: false, message: "当挂车重量大于0时挂车车牌不能为空", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    open() {
      this.dialogVisible = true;
      this.$nextTick(() => {
        if (this.dialogType == "add") {
          this.title = "新增";
        } else if (this.dialogType == "edit") {
          this.title = "编辑";
          this.loadDetail();
        } else if (this.dialogType == "detail") {
          this.title = "详情";
          this.loadDetail();
        } else if (this.dialogType == "declModify") {
          this.title = "变更申报";
          this.loadDetail();
        }
      });
    },
    close() {
      this.$refs["form"].resetFields();
      this.dialogVisible = false;
    },

    // 获取详情
    loadDetail() {
      const id = this.rowData.id;
      getSgsBulkCargoHead(id).then((res) => {
        if (res.code == 200) {
          this.form = res.data;
        }
      });
    },
    trayWtChange(val){
      if(val>0){
        this.rules.trayName[0].required=true;
      }else{
         this.rules.trayName[0].required=false;
      }

    },

    receiveSubList(val) {
      this.form.bulkCargoList = val;
    },
    // 提交表单
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          let params = {
            ...this.form,
          };
          if (this.dialogType == "add") {
            addSgsBulkCargoHead(params).then((res) => {
              if (res.code === 200) {
                this.$modal.msgSuccess("新增成功");
                this.close();
                this.$emit("handleQuery");
              }
            });
          } else if (this.dialogType == "edit") {
            params.id = this.rowData.id;
            updateSgsBulkCargoHead(params).then((res) => {
              if (res.code === 200) {
                this.$modal.msgSuccess("修改成功");
                this.close();
                this.$emit("handleQuery");
              }
            });
          } else if (this.dialogType == "declModify") {
            declModifyBulkCargoRecord(params).then((res) => {
              if (res.code === 200) {
                this.$modal.msgSuccess("变更申报成功");
                this.close();
                this.$emit("handleQuery");
              }
            });
          }
        }
      });
    },
    //关区代码改变时触发
    customsCodeChange(val){
      this.getLoadBaseFieldInfoList();
    },
    //进出口类型变更
    iEFlagChange(){
       this.getLoadBaseFieldInfoList();
    },
    //获取场所下拉列表
    getLoadBaseFieldInfoList() {
      if(this.form.customsMaster==null){
        return;
      }
      findBaseFieldInfo({
        customsCode: this.form.customsMaster,
        iEFlag:this.form.iEFlag
      }).then(response => {
        let fieldList = response.data;
        this.selectBaseFieldInfoList= fieldList.filter(n => "1" == n.extVal1||"3" == n.extVal1);
        if (this.selectBaseFieldInfoList != null && this.selectBaseFieldInfoList.length == 1) {
          this.form.bayonetFieldCode = this.selectBaseFieldInfoList[0].value;
        }
      })
    },

    // 选择车辆
    openSelectVehicle() {
      this.$refs.selectVehicle.open();
       this.$refs.vehicleInput.blur();
    },
    selectVeChange(val) {
      this.selectVehicelItem={...val};
      this.form.transportName = val.realVeNo;
      this.form.transportId = val.veCustomsNo;
      this.form.vehicleWeight=val.selfWt;
    },
    bindKeyTypeChange(val){
      if(val=='VN'){
         this.form.bindKeyInfo=this.form.transportName;
      }else  if(val=='VE'){
         this.form.bindKeyInfo=this.selectVehicelItem.rfid;
      } else  if(val=='IC'){
         this.form.bindKeyInfo=this.form.cardNo;
      }else  if(val=='BC'){
         this.$modal.alert("不支持条形码");
      }
    }

  },
};
</script>

<style lang="scss" scoped>
.basic-form {
  ::v-deep .el-form-item__label {
    line-height: 16px;
    display: flex;
    align-items: center;
    height: 32px;
    justify-content: flex-end;
  }
}
</style>
